<template>
<div class="containerx" ref="contaRef">
    <div class="topBoxs">
            <topBox></topBox>
            <!-- <hidden-search :keyWord="props.keyWord" v-show="!isShowSearch"></hidden-search> -->
    </div>

    <search-box :keyword="props.keyword"></search-box>
    <template v-if="searchInfo">
        <tags-box :pageinfo="searchInfo?.pageinfo" :keyword="props.keyword"></tags-box>
    </template>
    <router-view></router-view>
    <footer-box></footer-box>

</div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { topBox,tagsBox,searchBox,footerBox,hiddenSearch } from '../layout/index'
import { get } from '@/http/axios'
import { getQuery } from '../json'

interface Props{
    keyword:string
}
const props = defineProps<Props>()
let searchInfo = ref()
const contaRef = ref()
let isShowSearch = ref<boolean>(true)

onBeforeMount(() => {
    initData()
})

async function initData() {
   const query = await getQuery('all',props.keyword)
    get('/x/web-interface/wbi/search/all/v2?'+ query,'','/bili')
    .then(res => {
        console.log('搜索内容',res);
        searchInfo.value = res.data
    }).catch(res => {
        alert('搜索数据加载失败')
    })
}


// function listenerWinScroll(){
//     const scrollTop = contaRef.value.scrollTop
//    @scroll="listenerWinScroll"
//     if(scrollTop > 70) isShowSearch.value = false
//     else isShowSearch.value = true

// }
</script>

<style lang="scss" scoped>
.containerx{
    position: absolute;
    display: flex;
    gap: 30px 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 1200px;
    max-width: 2000px;
    top: 0;
    height: 100vh;
}
.topBoxs{
    position:fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}


</style>